<template>
  <div class="container">
    <div class="infoBox">
      <div class="itemBoxHigh itemBox frow faic">
        <p class="label frow faic fjcfe">头像：</p>
        <div class="content frow faic cp">
          <Upload
            ref="upload"
            :show-upload-list="false"
            :default-file-list="defaultList"
            accept="image/*"
            :format="['jpg', 'jpeg', 'png']"
            :on-progress="uploadProgress"
            :on-success="uploadSuccess"
            :on-format-error="uploadError"
            :before-upload="beforeUpload"
            :max-size="51200"
            :on-exceeded-size="overSize"
            :action="action"
            :data="uploadData"
          >
            <div class="imgBox frow faic">
              <img :src="headImg" v-if="headImg">
              <img src="@/assets/img/default_avatar.png" v-else>
              <p class="imgLabel">修改</p>
            </div>
          </Upload>
        </div>
      </div>

      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">姓名：</p>
        <div class="content frow faic">
          <Input v-model="info.name" placeholder="请输入姓名" class="inputClass frow faic"/>
        </div>
      </div>

      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">性别：</p>
        <div class="content frow faic frow faic">
          <RadioGroup v-model="info.sex">
            <Radio :label="1">男</Radio>
            <Radio :label="0">女</Radio>
            <Radio :label="2">保密</Radio>
          </RadioGroup>
        </div>
      </div>
      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">学科：</p>
        <div class="content frow faic">
          <Input v-model="info.subjectName" placeholder="请输入学科" class="inputClass frow faic"/>
        </div>
      </div>
      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">年级：</p>
        <div class="content frow faic">
          <Input v-model="info.gradeName" placeholder="请输入年级" class="inputClass frow faic"/>
        </div>
      </div>
      <div class="itemBox frow faic">
        <p class="label frow faic fjcfe">学校：</p>
        <div class="content frow faic">
          <Input v-model="info.schoolName" placeholder="请输入学校" class="inputClass frow faic"/>
        </div>
      </div>
    </div>
    <btn-wrap @submitBtn="submitBtn"/>
  </div>
</template>

<script>
import { Input, RadioGroup, Radio, Upload, Message } from "view-ui-plus";
import { putUserInfo, getUserUploadUrl } from "@/api/user";
import { mapActions, mapState } from "vuex";
import btnWrap from "./btn.vue";
import util from "@/libs/util";
let MessageCon = null;
export default {
  data() {
    return {
      info: {
        gradeName: "",
        headImg: undefined,
        name: "",
        schoolName: "",
        sex: 0,
        subjectName: ""
      },
      defaultList: [],
      action: "", // 上传地址
      uploadList: [],
      uploadData: {},
      client: {},
      progressKey: false,
      key: "",
      percentage: 0,
      headImg: ""
    };
  },
  mounted() {
    this.getNowUserInfo();
  },
  components: {
    Input,
    RadioGroup,
    Radio,
    Upload,
    btnWrap
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    getNowUserInfo() {
      this.info = Object.assign(this.info, this.userInfo);
    },
    async submitBtn() {
      if (!this.info.name) return Message.error("请输入姓名");
      let { success } = await putUserInfo(this.info);
      if (success) {
        Message.success("保存成功");
        await this.getUserInfo();
        this.getNowUserInfo();
      }
    },
    // 新方法
    beforeUpload(file) {
      this.getUserUploadUrl(file);
      return false;
    },
    // upload组件与oss上传 新方法
    getUserUploadUrl(file) {
      getUserUploadUrl({ fileName: file.name }).then(res => {
        this.key = res.objectName;
        this.putUpload(file, res.url);
      });
    },
    putUpload(file, url) {
      // 使用XMLHttpRequest来上传文件。
      var xhr = new XMLHttpRequest();
      xhr.open("PUT", url, true);
      xhr.setRequestHeader("Content-type", "application/octet-stream");
      xhr.upload.onprogress = event => {
        this.uploadProgress(event, file);
      };
      xhr.onload = () => {
        MessageCon();
        if (xhr.status == 200) {
          Message.success("上传成功");
          this.uploadSuccess(null, file);
        }
      };
      xhr.send(file);
    },
    // 复选框选中的数据
    handleSelect(d) {
      this.tableSelection = d;
    },
    overSize() {
      Message.error("大小不超过50M");
    },
    uploadRemove(file, fileList) {
      this.defaultFileList = fileList;
    },
    uploadProgress(event, file, fileList) {
      if (!this.progressKey) {
        MessageCon = Message.loading("上传中,请稍后");
        this.progressKey = true;
      }
      this.percentage = parseInt((event.loaded / event.total) * 100);
    },
    // 导入成功.
    uploadSuccess(res, file) {
      this.progressKey = false;
      this.info.headImg = this.key;
      let reader = new FileReader();
      // 读取所要预览文件所需要的base64数据
      let that = this;
      reader.addEventListener("load", function() {
        that.headImg = reader.result;
      });
      reader.readAsDataURL(file);
    },
    // 上传失败
    uploadError(e) {
      Message.error("上传失败,请选择图片格式的头像上传");
      this.progressKey = false;
      this.headImg = "";
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding-left: 0px;
  //   padding-bottom: 100px;
  .infoBox {
    .itemBox {
      padding: 12px 36px 12px 0;
      margin-bottom: 0px;
      border-bottom: 1px solid rgba(124, 124, 124, 0.2);
      justify-content: space-between;
      .label {
        font-size: 16px;
        font-weight: 400;
        color: #808080;
        width: 80px;
        min-width: 80px;
        text-align: right;
        margin-right: 10px;
        height: 48px;
      }
      .content {
        width: auto;
        height: 48px;
        .inputClass {
          color: #808080;
        }
      }
    }
    div.itemBoxHigh {
      height: 100px;
      width: 100%;
      .content {
        // height: 52px;
        :deep(.ivu-upload) {
          height: 80px;
          .imgBox {
            // width: 52px;
            height: 80px;
            border-radius: 50%;
            img {
              width: 80px;
              height: 80px;
              border-radius: 50%;
              margin-left: 24px;
            }
          }
        }
        .imgLabel {
          font-size: 16px;
          margin-left: 16px;
          font-weight: 400;
          color: rgba(89, 180, 238, 1);
        }
      }
    }
  }
}
</style>
